<template>
	<div class="page">
		 <div class="page-header">
			{{title}}
			<div class="page-timer" v-if="seconds>0">
				<Timer :seconds="seconds" :title="title"></Timer>
			</div>
		 </div>
		 <div class="page-body">
			 <div style="flex:1;">
				 <slot></slot>
			 </div> 
			 <div class="page-footer">
				 <slot name="footer"></slot>
			 </div>
		 </div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				
			}
		},
		
		props:['title','seconds']
	}
</script>

<style scoped="scoped">
	.page{
		height:34px;
		background-color: #f8f9fb;
	}
	
	.page-header{
		height:110px;
		line-height: 110px;
		background-color: #e7eef4;
		color:#005ffe;
		font-size: 42px; 
		font-weight: bold;
	}
	
	.page-body{
		height:824px;
		display: flex;
		flex-direction: column;
	}
	
	.page-footer{
		height:128px;
		line-height:128px;
		border-top:solid 2px #adbac3;
	}
</style>
